<!-- 订单列表 -->
<template>
	<view class="list">
		<view class="list-item" @click="handleNavToDetail()">
			<view class="header">
				<text class="name">下单时间：2024-12-24 00:00:00</text>
				<text class="status">待取货</text>
			</view>
			<view class="body">
				<view class="pictures">
					<image class="pic" :src="'/pagesB-order/static/images/will-delete/goods1.png'" mode="aspectFill">
					</image>
					<image class="pic" :src="'/pagesB-order/static/images/will-delete/goods1.png'" mode="aspectFill">
					</image>
					<image class="pic" :src="'/pagesB-order/static/images/will-delete/goods1.png'" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<text class="price">¥9.9</text>
					<text class="count">共1件</text>
				</view>
			</view>
			<view class="footer">
				<button class="more-btn iconfont" @click.stop="toggle01 = !toggle01">&#xe61e;</button>
				<view class="btn-group">
					<button class="btn">确认取货</button>
					<button class="btn">取消订单</button>
					<button class="btn active">配货完成</button>
					<view class="other-btn" :class="{'show': toggle01}">
						<button class="btn">更多测试</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const toggle01 = ref(false);
	const toggle02 = ref(false);
	const toggle03 = ref(false);

	const handleNavToDetail = () => {
		uni.navigateTo({
			url: '/pagesB-order/order-detail/index'
		});
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 20rpx 25rpx;

		&-item {
			padding: 22rpx 20rpx 34rpx 24rpx;
			background-color: white;
			border-radius: 15rpx;
			transition: background-color 0.2s;

			&+.list-item {
				margin-top: 20rpx;
			}

			&:active {
				background-color: #fafafa;
			}
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.name {
			font-size: 26rpx;
			color: #999999;
			line-height: 1.5;
		}

		.status {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.body {
		display: flex;
		margin-top: 34rpx;

		.pictures {
			flex-grow: 1;
			
			.pic {
				flex-shrink: 0;
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
				
				& + .pic {
					margin-left: 20rpx;
				}
			}
		}


		.right {
			flex-shrink: 0;
			width: 120rpx;

			.price {
				display: block;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				line-height: 1.5;
				text-align: right;
			}

			.count {
				display: block;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				line-height: 1.5;
				text-align: right;
			}
		}
	}

	.footer {
		display: flex;
		padding-top: 24rpx;

		.more-btn {
			flex-shrink: 0;
			width: 88rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			color: #222222;
			text-align: left;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background-color: transparent;
		}

		.btn-group {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;

			.btn {
				width: 166rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				text-align: center;
				line-height: 58rpx;
				box-sizing: border-box;
				margin: 20rpx 0 0 20rpx;
				transition: transform 0.2s;
				
				&::after {
					display: block;
					border: 1px solid #E5E5E5;
					border-radius: 100px;
				}

				&:active {
					transform: scale(0.9);
				}

				&.active {
					color: #FA2C19;
					
					&::after {
						border-color: #FA2C19;
					}
				}
			}

			.other-btn {
				flex-shrink: 0;
				display: flex;
				justify-content: flex-end;
				flex-wrap: wrap;
				width: 100%;
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.2s;

				&.show {
					max-height: 100px;
				}
			}
		}
	}
</style>